<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>手写验证码 &middot; 宋申奥的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugo_blog/"><h1>宋申奥的博客</h1></a>
      <p class="lead">
       这里是宋申奥的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugo_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>手写验证码</h1>
  <time datetime=2020-04-24T15:36:10Z class="post-date">Fri, Apr 24, 2020</time>
  <h2 id="手写验证码">手写验证码</h2>
<hr>
<h3 id="django接口">django接口</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">
<span style="color:#75715e">#绘画库</span>
<span style="color:#f92672">from</span> PIL <span style="color:#f92672">import</span> ImageDraw
<span style="color:#75715e">#图片库</span>
<span style="color:#f92672">from</span> PIL <span style="color:#f92672">import</span> Image
<span style="color:#75715e">#文件流</span>
<span style="color:#f92672">import</span> io
<span style="color:#75715e">#随机库</span>
<span style="color:#f92672">import</span> random

<span style="color:#f92672">import</span> redis

<span style="color:#75715e">#定义ip和端口</span>
host <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;localhost&#34;</span>
port <span style="color:#f92672">=</span> <span style="color:#ae81ff">6379</span>

<span style="color:#75715e">#建立链接</span>
r <span style="color:#f92672">=</span> redis<span style="color:#f92672">.</span>Redis(host<span style="color:#f92672">=</span>host,port<span style="color:#f92672">=</span>port)

<span style="color:#75715e">#自定义验证码</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyCode</span>(View):

    <span style="color:#75715e">#定义随机颜色</span>
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get_random_color</span>(self):
        R <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(<span style="color:#ae81ff">255</span>)
        G <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(<span style="color:#ae81ff">255</span>)
        B <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(<span style="color:#ae81ff">255</span>)
        <span style="color:#66d9ef">return</span> (R,G,B)

    <span style="color:#75715e">#定义图片视图</span>
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e">#画布</span>
        img_size <span style="color:#f92672">=</span> (<span style="color:#ae81ff">120</span>,<span style="color:#ae81ff">50</span>)
        <span style="color:#75715e">#定义图片对象</span>
        image <span style="color:#f92672">=</span> Image<span style="color:#f92672">.</span>new(<span style="color:#e6db74">&#39;RGB&#39;</span>,img_size,<span style="color:#e6db74">&#39;white&#39;</span>)
        <span style="color:#75715e">#定义画笔</span>
        draw <span style="color:#f92672">=</span> ImageDraw<span style="color:#f92672">.</span>Draw(image,<span style="color:#e6db74">&#39;RGB&#39;</span>)
        source <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;0123456789abcdefg&#34;</span>
        <span style="color:#75715e">#接受容器</span>
        code_str <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>
        <span style="color:#75715e">#进入循环绘制</span>
        <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">4</span>):
            <span style="color:#75715e">#获取字母颜色</span>
            text_color <span style="color:#f92672">=</span> self<span style="color:#f92672">.</span>get_random_color()
            <span style="color:#75715e">#获取随机下表</span>
            tmp_num <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(len(source))
            <span style="color:#75715e">#随机字符串</span>
            random_str <span style="color:#f92672">=</span> source[tmp_num]
            <span style="color:#75715e">#装入容器</span>
            code_str <span style="color:#f92672">+=</span> random_str
            <span style="color:#75715e">#绘制字符串</span>
            draw<span style="color:#f92672">.</span>text((<span style="color:#ae81ff">10</span><span style="color:#f92672">+</span><span style="color:#ae81ff">30</span><span style="color:#f92672">*</span>i,<span style="color:#ae81ff">20</span>),random_str,text_color)
        
        <span style="color:#75715e">#获取缓存区</span>
        buf <span style="color:#f92672">=</span> io<span style="color:#f92672">.</span>BytesIO()
        <span style="color:#75715e">#将图片存入</span>
        image<span style="color:#f92672">.</span>save(buf,<span style="color:#e6db74">&#39;png&#39;</span>)
        <span style="color:#75715e">#保存随机码</span>
        r<span style="color:#f92672">.</span>set(<span style="color:#e6db74">&#39;code&#39;</span>,code_str)
        <span style="color:#66d9ef">print</span>(r<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;code&#39;</span>))
        <span style="color:#75715e">#存session</span>
        request<span style="color:#f92672">.</span>session[<span style="color:#e6db74">&#39;code&#39;</span>] <span style="color:#f92672">=</span> code_str

        <span style="color:#66d9ef">return</span> HttpResponse(buf<span style="color:#f92672">.</span>getvalue(),<span style="color:#e6db74">&#39;image/png&#39;</span>)
</code></pre></div><h2 id="取验证码对比">取验证码对比</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Login</span>(APIView):
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
        <span style="color:#75715e">#接收参数</span>
        code <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>GET<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;code&#39;</span>,None)
        <span style="color:#75715e">#redis验证码对比</span>
        r_code <span style="color:#f92672">=</span> r<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;code&#39;</span>)<span style="color:#f92672">.</span>decode(<span style="color:#e6db74">&#39;utf-8&#39;</span>)
        <span style="color:#66d9ef">if</span> code <span style="color:#f92672">!=</span> r_code:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#34;code&#34;</span>: <span style="color:#ae81ff">403</span>, <span style="color:#e6db74">&#34;message&#34;</span>: <span style="color:#e6db74">&#34;验证码错误&#34;</span>})
        <span style="color:#75715e">#session验证码对比</span>
        session_code <span style="color:#f92672">=</span> request<span style="color:#f92672">.</span>session<span style="color:#f92672">.</span>get(<span style="color:#e6db74">&#39;code&#39;</span>,None)
        <span style="color:#66d9ef">if</span> code <span style="color:#f92672">!=</span> session_code:
            <span style="color:#66d9ef">return</span> Response({<span style="color:#e6db74">&#34;code&#34;</span>: <span style="color:#ae81ff">403</span>, <span style="color:#e6db74">&#34;message&#34;</span>: <span style="color:#e6db74">&#34;验证码错误&#34;</span>})
</code></pre></div><hr>
<h2 id="vue展示">vue展示</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
  &lt;<span style="color:#f92672">div</span>&gt;
    &lt;<span style="color:#f92672">tr</span>&gt;
        &lt;<span style="color:#f92672">td</span>&gt;
            <span style="color:#a6e22e">验证码</span><span style="color:#960050;background-color:#1e0010">：</span>
        &lt;/<span style="color:#f92672">td</span>&gt;
        &lt;<span style="color:#f92672">td</span>&gt;
            &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text&#34;</span> <span style="color:#f92672">v-model</span><span style="color:#e6db74">=&#34;code&#34;  placeholder=&#34;请输入验证码&#34;&gt;
</span><span style="color:#e6db74">        &lt;/td&gt;
</span><span style="color:#e6db74">        &lt;td&gt;
</span><span style="color:#e6db74">            &lt;img class=&#34;imgcode&#34; :src=&#34;yzimg&#34; alt=&#34;验证码加载失败&#34; @click=&#34;yzm()&#34;</span>&gt;
        &lt;/<span style="color:#f92672">td</span>&gt;
    &lt;/<span style="color:#f92672">tr</span>&gt;
  &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
  <span style="color:#a6e22e">data</span> () {
      <span style="color:#66d9ef">return</span>{
          <span style="color:#75715e">//验证码图片
</span><span style="color:#75715e"></span>          <span style="color:#a6e22e">yzimg</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;http://127.0.0.1:8000/code/&#39;</span>,
          <span style="color:#75715e">//输入验证码
</span><span style="color:#75715e"></span>          <span style="color:#a6e22e">code</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
      }
  },
  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
       <span style="color:#75715e">//验证码刷新
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">yzm</span>(){
            <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">suiji</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">random</span>()
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">yzimg</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;http://127.0.0.1:8000/code/?code=&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">suiji</span>
        }
  },
}
&lt;/<span style="color:#f92672">script</span>&gt;

&lt;<span style="color:#f92672">style</span>&gt;
<span style="color:#75715e">//鼠标放置验证码图片时变手形
</span><span style="color:#75715e"></span>.<span style="color:#a6e22e">imgcode</span> {
    <span style="color:#a6e22e">cursor</span><span style="color:#f92672">:</span><span style="color:#a6e22e">pointer</span>;
}

&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
